<template>
    <div>
        <h1>中国足球职业联赛队伍队徽</h1>
        <div v-for="team in teams" :key="team.id" class="team-logo">
            <img :src="team.crestUrl" :alt="team.name" />
            <p>{{ team.name }}</p>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: 'TeamLogos',
    data() {
        return {
            teams: [],
        };
    },
    mounted() {
        this.fetchTeams();
    },
    methods: {
        async fetchTeams() {
            try {
                const apiKey = 'ac73d8fd18b94d95ba13b43e4aa12c6d'; // 替换为您的 API Key
                const response = await axios.get('https://api.football-data.org/v4/matches', {
                    headers: {
                        'X-Auth-Token': apiKey,
                    },
                });
                this.teams = response.data.teams;
            } catch (error) {
                console.error('Error fetching teams:', error);
            }
        },
    },
};
</script>

<style scoped>
.team-logo {
    display: inline-block;
    margin: 10px;
    text-align: center;
}

.team-logo img {
    width: 100px;
    height: 100px;
}
</style>